<template>
  <div class="app-container">
    <div class="topDiv">
      <div>
        <p class="title">
          <img src="@/assets/img/bzzx2.png" alt style="height: 19px" />
          <span style="font-size: 18px; color: #333">帮助中心</span>
        </p>
        <!-- <div style="margin-top:30px;border-bottom:1px #eee solid;padding-bottom:10px"></div> -->
        <!-- 1 -->
        <div class="titmeBox">
          <div class="titmeBox_left">
            <img src="@/assets/img/jx.png" alt="" />
            <span>常见问题</span>
          </div>
          <div class="titmeBox_rigth">

            <div class="titmeBox_rigth" v-show="showgd" @click="gdButton('常见问题')">更多>></div>
            <div class="titmeBox_rigth" v-show="showgb" @click="gbButton('常见问题')">关闭>></div>
          </div>
        </div>
        <div class="cjwtBox" v-show="commonProblem.length > 0">
          <div class="cjwt_mini_top_Box">
            <div class="cjwt_mini_Box" v-for="(item, index) in commonProblem" :key="item.id">
              <span class="cjwt_mini_Box_titem" @click="textBoxShow(item)">{{ index + 1 }}.{{ item.name }}</span>
            </div>
          </div>

          <!-- <div
            class="cjwt_mini_bottom_Box"
            v-show="commonProblem.length <= 6"
            @click="gdButton('常见问题')"
          >
            <img
              src="@/assets/img/ckgx.png"
              alt=""
              class="cjwt_mini_bottom_img_Box"
            />
          </div> -->
        </div>
        <!-- 2 -->
        <div class="titmeBox">
          <div class="titmeBox_left">
            <img src="@/assets/img/jx.png" alt="" />
            <span>新手引导</span>
          </div>
          <div class="titmeBox_rigth" v-show="xshowgd" @click="gdButton('新手引导')">更多>></div>
          <div class="titmeBox_rigth" v-show="xshowgb" @click="gbButton('新手引导')">关闭>></div>
        </div>
        <div class="xsydBox" v-show="BeginnerSguide.length > 0">
          <div class="xsyd_mini">
            <div class="xsyd_mini_Box" :style="{ backgroundColor: (clack == index) ? '#F2F8FD' : '' }" id="xsyd-main-box"
              v-for="(item, index) in BeginnerSguide" :key="item.id" @mousemove="mousemove(index)"
              @mouseout="mouseout(index)" @click="textBoxShow(item)">
              <div class="imgBox">
                <!-- <img src="@/assets/img/bzzx2.png" alt="" class="img_mini_Box" /> -->
                <img :src="item.img" alt="" class="img_mini_Box" />
              </div>
              <div class="xsyd_mini_Box_titem" :style="{ color: (clack == index) ? 'red' : '' }">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <!-- 3 -->
        <div class="titmeBox">
          <div class="titmeBox_left">
            <img src="@/assets/img/jx.png" alt="" />
            <span>声明</span>
          </div>
          <div class="titmeBox_rigth"></div>
        </div>

        <div class="smBox" v-show="WithdrawalStatement.length > 0 && Disclaimer.length > 0">
          <div class="sm_mini_Box" @click="smBottom('免责声明')">
            <div class="titleimgBox">
              <img src="@/assets/img/mzsmtb.png" alt="" class="img_mini_Box" />
              <span>免责声明</span>
            </div>
            <div class="sm_mini_Box_titem" v-for="(item, index) in Disclaimer" :key="item.id">
              <div class="titleName">{{ item.name }}</div>
              <div class="titleText titleName_mzsm_box">
                <div v-html="item.content" class="titleName_mzsm"></div>
                <el-button type="text" v-show="index == 1" style="margin-left: 7px">详情></el-button>
              </div>
            </div>
          </div>

          <div class="sm_mini_Box" @click="smBottom('提现手续费说明')">
            <div class="titleimgBox">
              <img src="@/assets/img/txsxfsm.png" alt="" class="img_mini_Box" />
              <span>提现手续费说明</span>
            </div>
            <div class="sm_mini_Box_titem" v-for="item in WithdrawalStatement" :key="item.id">
              <!-- <div class="titleName">{{ item.name }}</div> -->
              <div class="titleText titleName_mzsm_box2">
                <div v-html="item.content" class="titleName_mzsm"></div>
                <el-button type="text" style="margin-left: 7px" class="titleName_mzsm_right">详情></el-button>
              </div>
              <!-- <div>
                <div
                  class="titleText"
                  v-html="item.content"
                  style="color: #999"
                ></div>
                 <el-button
                  type="text"
                   class="txsxf_main_bottom_box"
                  >详情></el-button
                >
              </div> -->
            </div>
          </div>
        </div>
        <!-- 4 -->

        <div class="titmeBox" v-show="protocolData.length > 0">
          <div class="titmeBox_left">
            <img src="@/assets/img/jx.png" alt="" />
            <span>协议规范及政策</span>
          </div>
          <!-- <div class="titmeBox_rigth" @click="gdButton('xygd')">更多>></div> -->
        </div>

        <div class="xygfBox">
          <div class="xygfBox_mini_box" v-for="(item, index) in protocolData" :key="index">
            <div class="xygfBox_top_img_box">
              <img :src="item.img" alt="" class="xygfBox_top_img" />
            </div>
            <div class="xygfBox_mini_main_box">
              <div class="xygfBox_mini_main_type_box">{{ item.type }}</div>
              <el-scrollbar style="height: 160px">
                <div style="color: #666; font-size: 14px" v-for="item2 in item.list" :key="item2.id"
                  class="xygfBox_mini_main_type_name_box">
                  <span>•</span>
                  <span @click="textBoxShow(item2)" class="xygfBox_mini_main_type_text_box"
                    style="margin-left: 5px; cursor: pointer">{{ item2.name || "---------" }}</span>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增公告弹窗 -->
    <el-dialog :title="title" :visible.sync="projectDataSummary" width="30%" center>
      <span v-html="textContent"></span>
      <div slot="footer">
        <!-- <el-button @click="projectDataSummary = false">取消</el-button> -->
        <el-button type="primary" @click="projectDataSummary = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 免责声明弹窗 -->
    <el-dialog :title="smTitle" :visible.sync="mzsmDataSummary" width="40%" center>
      <el-scrollbar style="height: 300px">
        <div v-for="item in Disclaimer2" :key="item.id" style="margin-bottom: 20px">
          <div style="font-size: 15px; font-weight: 550">{{ item.name }}</div>
          <div v-html="item.content" style="font-size: 14px; color: #999; margin-top: -5px"></div>
        </div>
      </el-scrollbar>

      <div slot="footer">
        <!-- <el-button @click="projectDataSummary = false">取消</el-button> -->
        <el-button type="primary" @click="mzsmDataSummary = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuList } from "@/api/system/index.js";
import { listAPI, moreAPI } from "@/api/projectManagement/index.js";
import { selectUserAgreements } from "@/api/system/index.js";
export default {
  data() {
    return {
      xshowgd: true,
      xshowgb: false,
      showgd: true,
      showgb: false,
      clack: -1,
      // 未点击常见问题的更多时的数据
      notclickdata: [],
      // 未点击新手指导的更多时的数据
      notclicknovicedata: [],
      //免责声明
      mzsmDataSummary: false,
      Disclaimer2: [],
      smTitle: "",
      //常见问题
      commonProblem: [],
      //新手引导
      BeginnerSguide: [],
      //免责声明
      Disclaimer: [],
      //提现声明
      WithdrawalStatement: [],
      //协议
      protocolData: [],
      //弹窗
      projectDataSummary: false,
      //弹窗标题
      title: "",
      //弹窗内容
      textContent: "",
      userId: "",
    };
  },
  async created() { },
  async mounted() {
    const userID = sessionStorage.getItem("userID");
    this.userId = userID - 0;




    this.getData();
  },
  methods: {
    gbButton(row) {
      if (row == "常见问题") {
        this.showgd = true,
          this.showgb = false
        this.commonProblem = this.notclickdata
      } else {
        this.xshowgb = false,
          this.xshowgd = true
        this.BeginnerSguide = this.notclicknovicedata
      }

    },
    mousemove(index) {
      this.clack = index
    },
    mouseout(index) {
      this.clack = -1
    },

    //免责声明
    async smBottom(row) {
      if (row == "免责声明") {
        let param = {
          type: row,
          pageNum: 1,
          pageSize: 100,
        };
        const data = await selectUserAgreements(param);
        if (data.code == 200) {
          this.Disclaimer2 = data.data;
        }
      } else {
        console.log(this.WithdrawalStatement, "免责声明");
        this.Disclaimer2 = this.WithdrawalStatement;
      }
      this.smTitle = row;
      this.mzsmDataSummary = true;
    },
    //新增编辑公告弹窗
    async textBoxShow(row) {
      // 常见问题闭合后数据
      // this.commonProblem = this.notclickdata
      // this.BeginnerSguide = this.notclicknovicedata


      this.projectDataSummary = true;
      this.title = row.name;
      this.textContent = row.content;
    },
    async getData(row) {
      let param = {
        // type:"新手引导",
        pageNum: 1,
        pageSize: 100,
        tenantId: sessionStorage.getItem("TenantId") - 0 || this.userId - 0,
      };
      const data = await selectUserAgreements(param);
      if (data.code == 200) {
        console.log(data, "公告列表");
        // const regex = /<\/?.+?\/?>/gm;
        // const subst = ``;
        // data.data.map((item) => {
        //   item.content2 = item.content.replace(regex, subst);
        // });
        let cjwtArr = data.data.filter((item) => item.type == "常见问题");
        //截取前6个
        this.commonProblem = cjwtArr.slice(0, 6);
        //未点击更多
        this.notclickdata = cjwtArr.slice(0, 6);
        console.log(this.commonProblem)
        let xsArr = data.data.filter((item) => item.type == "新手引导");
        this.notclicknovicedata = xsArr
        let color = [
          { img: require("@/assets/img/xsyd1.png") },
          { img: require("@/assets/img/xsyd2.png") },
          { img: require("@/assets/img/xsyd3.png") },
          { img: require("@/assets/img/xsyd4.png") },
          { img: require("@/assets/img/xsyd5.png") },
        ];

        let index2 = 0;
        xsArr.forEach((item) => {
          index2++;
          if (index2 == color.length) {
            index2 = 0;
          }
          item.img = color[index2].img;
        });
        //截取前8个
        this.BeginnerSguide = xsArr.slice(0, 8);

        const mzsmArr = data.data.filter((item) => item.type == "免责声明");
        //截取前2个
        this.Disclaimer = mzsmArr.slice(0, 2);

        this.WithdrawalStatement = data.data.filter(
          (item) => item.type == "提现手续费说明"
        );

        let arr = data.data.filter((item) => {
          if (
            item.type == "租户协议" ||
            item.type == "平台服务协议" ||
            item.type == "提现协议" ||
            item.type == "平台租户协议"
          ) {
            return item;
          }
        });

        let arr2 = [
          {
            type: "租户协议",
            img: require("@/assets/img/zhxy.png"),
            list: [],
          },
          {
            type: "平台服务协议",
            img: require("@/assets/img/ptfwxy.png"),
            list: [],
          },
          {
            type: "提现协议",
            img: require("@/assets/img/ptzhxy.png"),
            list: [],
          },
          {
            type: "平台租户协议",
            img: require("@/assets/img/txxy.png"),
            list: [],
          },
        ];
        console.log(arr, "11111");
        arr2.forEach((item) => {
          arr.map((item2) => {
            if (item.type == item2.type) {
              item.list.push(item2);
            }
          });
        });
        this.protocolData = arr2;
        console.log(arr2, "333");
        // this.protocolData = data.data.filter((item) => {
        //   if (
        //     item.type == "租户协议" ||
        //     item.type == "平台服务协议" ||
        //     item.type == "提现协议" ||
        //     item.type == "平台租户协议"
        //   ) {
        //     return item;
        //   }
        // });

        // console.log(this.protocolData ,'889856756657')
      } else {
        this.$message.error(data.msg);
      }

      // const data = await getMenuList(param);
      // console.log(data, "公告列表");
      // if (data.code == 200 && data.data.list.length > 0) {
      //   this.postList = data.data.list;
      //   this.total = data.data.total;
      // };
      //   if(row){
      //    this.$message({
      //     message: '搜索中...',
      //     type: 'success'
      //   });
      // }
    },
    //点击更多
    async gdButton(row) {
      let param = {};
      if (row == "xygd") {
        this.$message("已全部显示！");
      } else if (row == "新手引导") {
        this.xshowgb = true,
          this.xshowgd = false,
          param = {
            type: row,
            pageNum: 1,
            pageSize: 1000,
          };
        const data = await selectUserAgreements(param);
        if (data.code == 200) {
          if (data.data.length > 8) {
            let color = [
              { img: require("@/assets/img/xsyd1.png") },
              { img: require("@/assets/img/xsyd2.png") },
              { img: require("@/assets/img/xsyd3.png") },
              { img: require("@/assets/img/xsyd4.png") },
              { img: require("@/assets/img/xsyd5.png") },
            ];

            let index2 = 0;
            data.data.forEach((item) => {
              index2++;
              if (index2 == color.length) {
                index2 = 0;
              }
              item.img = color[index2].img;
            });
            this.BeginnerSguide = data.data;
            this.$message({
              message: "操作成功！",
              type: "success",
            });
          } else {
            this.$message("已全部显示！");
          }
        } else {
          this.$message.error(data.msg);
        }
      } else {
        this.showgb = true,
          this.showgd = false,
          param = {
            type: row,
            pageNum: 1,
            pageSize: 1000,
          };
        const data2 = await selectUserAgreements(param);
        if (data2.code == 200) {
          if (data2.data.length > 6) {
            this.commonProblem = data2.data;
            this.$message({
              message: "操作成功！",
              type: "success",
            });
          } else {
            this.$message("已全部显示！");
          }
        } else {
          this.$message.error(data2.msg);
        }
      }
    },
  },
  watch: {},
};
</script>
<style scoped lang="scss">
//常见问题
.cjwtBox {
  width: 100%;
  padding: 25px 20px 10px 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 0px rgb(233, 233, 233);
  display: flex;

  flex-direction: column;
  justify-content: center;

  // flex-wrap: wrap;
  // justify-content: space-between;
  // align-items: center;
  // border: 1px red solid;
  .cjwt_mini_top_Box {
    //  border: 1px red solid;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;

    .cjwt_mini_Box {
      // border: 1px red solid;
      padding-left: 5px;
      margin: 16px 0px;
      margin-left: 1%;
      width: 32%;
      color: #444;
      font-size: 15px;

      .cjwt_mini_Box_titem {
        cursor: pointer;
      }

      .cjwt_mini_Box_titem:hover {
        color: red;
      }
    }
  }

  .cjwt_mini_bottom_Box {
    //  border: 1px red solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;

    .cjwt_mini_bottom_img_Box {
      height: 15px;
    }
  }
}

//新手引导
.xsydBox {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  // border: 1px red solid;
  align-items: center;

  .xsyd_mini {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    // border: 1px red solid;
    align-items: center;
    background-color: FFFFFF;
    box-shadow: 0px 0px 20px 0px rgb(233, 233, 233);

  }

  .xsyd_mini_Box {
    //  border: 1px red solid;
    display: flex;
    margin: 0px 5px 15px 0px;
    align-items: center;
    margin: 1.5% 1% 1.5% 1.5%;
    width: 22%;
    cursor: pointer;
    height: 100px;
    padding: 0px 20px;
    border-radius: 10px;
    // box-shadow: 0px 0px 20px 0px rgb(233, 233, 233);
    color: #444;
    font-size: 15px;

    .img_mini_Box {
      height: 50px;
      margin-right: 10px;
    }

    // .imgBox {
    //   border-radius: 50%;
    //   background: rgb(255, 247, 242);
    //   height: 50px;
    //   width: 50px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: center;
    //   margin-right: 10px;
    //   .img_mini_Box {
    //     height: 20px;
    //   }
    // }
    .xsyd_mini_Box_titem {}
  }
}

//声明
.smBox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;

  .sm_mini_Box {
    border-radius: 10px;
    box-shadow: 0px 0px 20px 0px rgb(233, 233, 233);
    width: 49.3%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px 10px 0px;
    // border: 1px red solid;
    height: 255px;
    cursor: pointer;
    overflow: hidden; //超出隐藏

    .titleimgBox {
      // border: 1px red solid;
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 550;
      margin: 25px 0px;

      .img_mini_Box {
        height: 37px;
        margin-right: 10px;
      }
    }

    .sm_mini_Box_titem {
      // border: 1px red solid;
      width: 100%;
      padding: 0px 20px;
      margin-bottom: 10px;

      .titleName {
        // border: 1px red solid;
        color: #444;
        font-weight: 550;
        font-size: 15px;
      }

      .titleText {
        margin-top: -5px;
        // border: 1px red solid;
        // padding: 0px;
        height: auto;
        color: #8c8c8c;
        font-size: 13px;
      }

      .titleName_mzsm_box {
        display: flex;

        .titleName_mzsm {
          // border: 1px red solid;
          width: 90%;
          text-overflow: ellipsis; //文本超出显示省略号
          overflow: hidden; //超出隐藏
          // -webkit-line-clamp: 1; //多行时可以控制显示的行数
          // -webkit-box-orient: vertical;
          white-space: nowrap; //文本不换行
        }
      }

      .titleName_mzsm_box2 {
        display: flex;
        height: 37%;

        // border: 1px red solid;
        .titleName_mzsm {
          // border: 1px red solid;

          width: 99.7%;
          text-overflow: ellipsis; //文本超出显示省略号
          overflow: hidden; //超出隐藏
          -webkit-line-clamp: 6; //多行时可以控制显示的行数
          -webkit-box-orient: vertical;
        }

        .titleName_mzsm_right {
          //  border: 1px red solid;
          height: 10px;
          margin-top: 105px;
        }
      }
    }
  }
}

//协议规范
// <div class="xygfBox">
//           <div class="xygfBox_mini_box">
//             <div class="xygfBox_top_img_box">
//               <img src="" alt="" class="xygfBox_top_img">
//             </div>
//             <div class="xygfBox_mini_main_box">

//             </div>
//           </div>
//         </div>
.xygfBox {
  width: 100%;
  // border: 1px red solid;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 10vh;
  margin-top: 15px;

  .xygfBox_mini_box {
    width: 24%;
    // border: 1px red solid;
    // display: flex;
    // justify-content:space-between;
    height: auto;

    .xygfBox_top_img_box {
      width: 100%;

      // border: 1px red solid;
      .xygfBox_top_img {
        height: 25px;
        margin-left: 30px;
      }
    }

    .xygfBox_mini_main_box {
      // border: 1px red solid;
      height: 100%;
      margin-top: -15px;
      display: flex;
      flex-direction: column;
      padding: 30px 20px;
      // justify-content: center;
      background: linear-gradient(0deg,
          rgb(240, 240, 240) 5%,
          rgb(255, 241, 244) 50%);

      .xygfBox_mini_main_type_box {
        margin-top: 10px;
        // border: 1px red solid;
        font-weight: 550;
        font-size: 15px;
        margin-left: 10px;
        margin-bottom: 5px;
        margin-bottom: 20px;
      }

      .xygfBox_mini_main_type_name_box {
        // border: 1px red solid;
        margin-bottom: 17px;

        .xygfBox_mini_main_type_text_box:hover {
          color: red;
          text-decoration: underline;
        }
      }
    }
  }
}

//弹窗在屏幕中间
::v-deep .el-dialog__wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}

// 标题
.titmeBox {
  // border: 1px red solid;
  height: 30px;
  display: flex;
  justify-content: space-between;
  // justify-content: center;
  align-items: center;
  margin: 20px 0px 5px 0px;

  .titmeBox_left {
    display: flex;
    align-items: center;

    img {
      height: 16px;
    }

    span {
      margin-left: 10px;
      font-weight: 550;
      // border: 1px red solid;
      font-size: 16px;
    }
  }

  .titmeBox_rigth {
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }
}

.app-container {
  .title {
    padding: 0px 0px 8px 0px;
    margin: 5px 0px 10px 0px;
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;

    img {
      height: 30px;
      margin-right: 10px;
    }
  }
}

.topDiv {
  padding: 0px 20px;
  overflow: hidden;
  height: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 5px;

  .title {
    // border: 1px red solid;
    display: flex;
    align-items: center;
  }

  .poR {
    position: relative;

    .poA {
      position: absolute;
      left: 50%;
      bottom: -30px;
      transform: translateX(-50%);
    }

    .poDiv {
      border: 1px solid #40a0ff00;
      border-radius: 5px;
      padding: 15px;

      .poImg {
        width: 100%;
      }
    }

    .isActive {
      border: 1px solid #409eff;
    }
  }
}
</style>
